<template>
  <div class="my-search">
    <!-- <div class="search-box">
      <el-input placeholder="搜索视频" v-model="input" class="input-search">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="toSearch()"></i>
      </el-input>
    </div> -->
    <div class="header">
      <div class="order">
        <my-list>
          <my-list-item index="1">最新发布</my-list-item>
          <my-list-item index="2">最多播放</my-list-item>
          <my-list-item index="3">最多收藏</my-list-item>
        </my-list>
      </div>
      <div class="time">
        <my-list>
          <my-list-item index="1">10分钟以下</my-list-item>
          <my-list-item index="2">10-30分钟</my-list-item>
          <my-list-item index="3">30-60分钟</my-list-item>
          <my-list-item index="4">60分钟以上</my-list-item>
        </my-list>
      </div>
    </div>
    <div class="main">
      <video-card v-for="(item,index) in videos" :key="index" :video="item"></video-card>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalRow"
        prev-text="上一页"
        next-text="下一页"
        :current-page.sync="pageNumber"
        :page-size="24"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "name",
  data: function() {
    return {
      activeIndex: "1",
      pageNumber:1,
      videos:[],
      totalRow:0
    };
  },
  methods: {
    getVideoList(){

      this.axios.post('video/getVideoList',{
        title:this.$route.query.key,
        pageNumber:this.pageNumber,
        pageSize:24
      }).then(res=>{
        this.videos=res.data.page.list
        this.totalRow=res.data.page.totalRow
      })
    }
  },
  mounted(){
    this.getVideoList()
  },
  watch:{
    pageNumber:function(){
      this.getVideoList();
    }
  }
};
</script>

<style lang="scss" scoped>
.my-search {
  .header {
    border-bottom: 1px solid #e5e9ef;
  }
  .main {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    .video-card {
      margin: 0 29px 25px 0px;
      &:nth-child(6n) {
        margin-right: 0;
      }
    }
  }
  .pagination {
    text-align: center;
    margin: 30px auto;
  }
}

/*搜索框*/
.search-box {
  line-height: 59px;
  width: 30%;
  margin: 0 auto;
  .el-icon-search {
    margin: 0 10px 0 0;
    font-size: 20px;
    color: #409eff;
  }
}
</style>